<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            margin: 50px auto;
            font-size: 20px;
            text-align: center;
            border-color: red;
        }
    </style>
</head>


<body>
    <table border="1" cellspacing="0" cellpadding="0" width="50%" height="50%">
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>爱好</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>




    <script>
        var arr = [
            { num: '0', name: 'kky1', age: '15', sex: '男', hobby: '学习' },
            { num: '1', name: 'kky2', age: '16', sex: '男', hobby: '健身' },
            { num: '2', name: 'kky3', age: '17', sex: '男', hobby: '代码' },
            { num: '3', name: 'kky4', age: '18', sex: '男', hobby: '足球' },
            { num: '4', name: 'kky5', age: '19', sex: '男', hobby: '篮球' }
        ]
        localStorage.arr = JSON.stringify(arr);
        // function getLocalCartData() {
        //     arr = localStorage.arr ? JSON.parse(localStorage.arr) : [];
        //     return arr;
        // }
        window.onload = function () {
            render(arr)

        }
        function render(arr) {
            var tbody = document.querySelector("tbody");
            tbody.innerHTML = "";
            var str = "";
            for (var i = 0; i < arr.length; i++) {
                str += `
                <tr>
                        <td>
                            ${i + 1}  
                        </td>
                        <td>
                            ${arr[i].name}
                        </td>
                        <td>
                            ${arr[i].age}
                        </td>
                        <td>
                            ${arr[i].sex}
                        </td>
                        <td>
                            ${arr[i].hobby}
                        </td>
                        <td>
                            <button type="button" id="btn1" onclick="toTop(${arr[i].num})">上移</button>
                            <button type="button" id="btn2" onclick="del(${arr[i].num})">删除</button>
                            <button type="button" id="btn3" onclick="toBottom(${arr[i].num})">下移</button>
                        </td>
                    </tr>
                `
            }
            tbody.innerHTML = str;
        }
        var btn1 = document.getElementById("btn1")
        var btn2 = document.getElementById("btn2")
        var btn3 = document.getElementById("btn3")
        function toTop(id) {
            if (id == 0) {
                btn1.disabled = true;
            }
            var arr1 = JSON.parse(localStorage.arr)
            arr.splice(id, 1)
            arr.splice(id - 1, 0, arr1[id])
            arr[id - 1].num = id - 1;
            arr[id].num = id;
            // console.log(arr)
            localStorage.arr = JSON.stringify(arr)
            render(arr)
        }
        function toBottom(id) {
            if (id == 4) {
                btn3.disabled = true;
            }
            var arr1 = JSON.parse(localStorage.arr)
            arr.splice(id, 1)
            arr.splice(id + 1, 0, arr1[id])
            arr[id].num = id;
            arr[id + 1].num = id + 1;
            // console.log(arr)
            localStorage.arr = JSON.stringify(arr)
            render(arr)
        }
        function del(id) {
            var arr1 = JSON.parse(localStorage.arr)
            arr.splice(id, 1)
            localStorage.arr = JSON.stringify(arr)
            render(arr)
        }
    </script>


</body>


</html>